import React from 'react';
import './index.less';
import { Button } from 'antd-mobile';
import { useParams } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import Title from '../../components/title';

function MobxDemo(props: any) {
  console.log('mobxdemo props ===>', props);
  const routeParams: any = useParams();
  const routeTitle = routeParams.title;
  const { mobxStore } = props;
  const text: string = `${mobxStore.student.name}的成绩是${mobxStore.student.isPassTheExam}`;

  return (
    <div className='mobx-demo'>
      <Title title={routeTitle} left={true} />
      <p>改变对象里的属性值mobxStore.student.age</p>
      <Button color='primary' onClick={() => mobxStore.changeAge()}>{mobxStore.student.age}</Button>
      <Button color='primary' onClick={() => mobxStore.getGrade(mobxStore.student.grade)}>{text}</Button>
    </div>
  );
}
export default inject('mobxStore')(observer(MobxDemo));
